<template>
	<!-- 投票 选项 学生列表 -->
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
				<view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='fd0_0_c1_c0_ibhf'>选项详情</text>
				</view>
				<view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
				</view>
			</view>

		</view>

		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="hp"></view>
		<view class="top flex">
			<view class="left">{{val}} </view>
			<view class="right" style="margin-left: auto;"> 共 <text style="color: #1C5EFC;">{{list.length}}</text> 人
			</view>
		</view>
		<view class="imhs" v-if="list.length == 0">
			<image class="" src="/static/images/none.png" mode=""></image>
			<view class="">
				暂无数据
			</view>
		</view>
		<view class="lists">
			<view class="items flex" :class="item.check && tab==1?'se':''" v-for="(item,index) in list" :key="index">
				<view class="users flex flex-sub">
					<image class="checkimg" @tap.stop="checkitem(index)" v-if="tab==1"
						:src='item.check ?STATIC_URL+"1671.png":STATIC_URL+"16002.png"' mode=""></image>
					<image class="imgs" :src='item.avatar?item.avatar:STATIC_URL+"LOGO.png"' mode="aspectFill"></image>
					<view class="name hid1"> {{item.user_real_name}} </view>
				</view>
				<!-- <view class="time" v-if="tab==1"> 用时：10s </view> -->
				<view class="score" v-if="tab==1" @tap.stop="openitem(item)">
					<view class="zt" v-if="item.review_status==1"> 已评分：{{item.score}}分</view>
					<view class="pf" v-else >评分</view>
				</view>
			</view>
		</view>
		<view class="flex benben-position-layout flex flex-wrap align-center jf_flex_2_ibhf" v-if="tab==1 && list.length>0">
			<view class='flex flex-wrap align-center' @tap.stop="checkall">
				<image class='jf_fd2_0_c0_ibhf' mode="aspectFit"
					:src='allcheck?STATIC_URL+"1671.png":STATIC_URL+"16002.png"'></image>
				<text class='jf_fd2_0_c1_ibhf'>{{!allcheck?'全选':'取消全选'}}</text>
				<text class="checknum" v-if="checknum>0">（已选：{{checknum}} 人）</text>
			</view>
			<button class='jf_fd2_1_ibhf' @tap.stop="openall">批量评分</button>

		</view>
		<!--选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker4" @change="sureFunc()" :visible.sync="pickerDiy1763618496046"
			:label.sync='checkname' :value.sync='checkid' :options='corelist' mode='selector' :mask-show='true'
			:timeout='true' :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between zy_picker4_0_ibhf'>
					<text class='zy_picker4_0_c0_ibhf' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
					<text class='zy_picker4_0_c1_ibhf'>评分</text>
					<text class='zy_picker4_0_c2_ibhf'
						@tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
				</view>
			</template>
		</benben-picker>
		<!--选择器结束 -->
		<view :style="{height: '190rpx'}"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				allcheck: false, //是否全选
				checknum: '', //选中的数量
				uuid: '', //选中的id
				"pickerDiy1763618496046": false,
				"corelist": [],
				"checkname": "",
				checkid: '',
				tab: 1,
				val: '', //选项
				name: '',
				aid: '',
			}
		},
		onLoad(options) {
			this.val = options.name + '、' + options.options
			this.name = options.name
			this.aid = options.aid
			this.getscore()
			this.getinfo()
		},
		methods: {
			getscore() {
				const arr2 = [...Array(21).keys()].map(i => ({
					name: (i - 10).toString()
				}));
				console.log(arr2);
				this.corelist = arr2
			},
			//获取学生列表
			async getinfo() {
				let res = await this.$api.post(global.apiUrls.post68b6aac2f0a0f, {
					activitieslog_id: this.aid,
					vote_option: this.name
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				if (res.data.data.length == 0) {
					this.list = []
					return
				}
				this.list = res.data.data.map(item => {
					item.check = false
					return item
				})
			},
			openitem(item) {
				this.uuid = item.aid
				this.pickerDiy1763618496046 = true
			},
			openall() {
				let aid = ''
				this.list.map(item => {
					if (item.check) {
						aid += item.aid + ','
					}
				})
				if (aid) {
					this.uuid = aid
					this.uuid=this.uuid.slice(0, -1)
					this.pickerDiy1763618496046 = true

				} else {
					this.$message.info('请选择要评分的学生')
				}
			},

			// 全选
			checkall() {
				this.allcheck = !this.allcheck
				let num = 0
				this.list.map(item => {
					item.check = this.allcheck
					if (item.check) {
						num++
					}
				})
				this.checknum = num
			},
			// 单个选择
			checkitem(index) {
				this.list[index].check = !this.list[index].check
				this.checkzt()
			},
			checkzt() {
				let st = true
				let num = 0
				this.list.map(item => {
					if (!item.check) {
						st = false
					} else {
						num++
					}
				})
				this.allcheck = st
				this.checknum = num
			},
			// 评分
			async sureFunc() {
				console.log(this.checkname)
				console.log(this.uuid)
				let res = await this.$api.post(global.apiUrls.post6916ef0d744a5, {
					aid: this.uuid,
					score: this.checkname
				});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.allcheck=false
				this.checknum=''
				this.getinfo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #ffffff;
		background-size: 100% auto;

		.hp {
			width: 100%;
			height: 24rpx;
			background-color: #F3F4F8;
		}

		.flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}

			.fd0_0_c0_ibhf {
				width: 120rpx;

				.fd0_0_c0_c0_ibhf {
					font-size: 36rpx;
					color: #333;
				}
			}
		}

		.top {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			padding: 0 24rpx;
			background: #FBFBFB;
			border-radius: 0px 0px 0px 0px;
			font-size: 32rpx;
		}

		.imhs {
			width: 100%;
			text-align: center;

			image {
				margin-top: 120rpx;
				width: 496rpx;
				height: 296rpx;
			}

			view {
				margin-top: 20rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 35rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.lists {
			padding-bottom: 36rpx;
			background-color: #ffffff;

			.se {
				background-color: #F2F7FF;
			}

			.zt {
				margin-left: auto;
				color: #29BE9E;
			}

			.pf {
				margin-left: auto;
				color: #145EFD;
			}

			.items {
				align-items: center;
				width: 100%;
				height: 132rpx;
				padding: 26rpx 24rpx;

				.users {
					align-items: center;
					width: 310rpx;
				}

				.checkimg {

					width: 36rpx;
					height: 36rpx;
					background: #FFFFFF;
					border-radius: 6rpx;
				}

				.imgs {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin: 0 32rpx 0 24rpx;
				}

				.name {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					max-width: 250rpx;
				}

				.time {
					width: 140rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.score {
					margin-left: auto;
				}
			}

		}

		.jf_flex_2_ibhf {
			width: 750rpx;
			height: 190rpx;
			overflow: hidden;
			z-index: 10;
			bottom: calc(0rpx + var(--window-bottom));
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;
			padding: 0 24px;

			.jf_fd2_0_c0_ibhf {
				width: 36rpx;
				height: 36rpx;
				border-radius: 0rpx;
				margin: 0rpx 12rpx 0rpx 0rpx;
			}

			.jf_fd2_0_c1_ibhf {
				color: #666666;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.checknum {

				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #1C5EFC;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.jf_fd2_1_ibhf {
				border-radius: 42rpx;
				width: 257rpx;
				line-height: 84rpx;
				font-size: 24rpx;
				background: linear-gradient(270deg, #145EFD 0%, #6E9CFF 100%);
				color: #fff;
				height: 84rpx;
				margin: 0rpx 0rpx 0rpx auto;
			}
		}

		.zy_picker4_0_ibhf {
			background-color: #ffffff;
			padding: 0rpx 32rpx 0rpx 32rpx;
			line-height: 88rpx;
			border-bottom: 1px solid #eee;

			.zy_picker4_0_c0_ibhf {
				color: var(--benbenFontColor2);
			}

			.zy_picker4_0_c1_ibhf {
				color: var(--benbenFontColor0);
			}

			.zy_picker4_0_c2_ibhf {
				color: var(--benbenFontColor4);
			}
		}
	}
</style>
